import styles from './index.less';
import imgs from '../../icon/imgs';
import { any } from 'prop-types';

import React, { FC, useState } from 'react';
import { history } from 'umi';
import { ImageUploader, Space, Toast, Dialog } from 'antd-mobile';
import { ImageUploadItem } from 'antd-mobile/es/components/image-uploader';
import { demoSrc, mockUpload, mockUploadFail } from './utils';
// import { DemoBlock, DemoDescription } from 'demos'
import { markHeadName } from '../utils';

export default function IndexPage() {
  let arr = markHeadName(100, 450);

  return (
    <div>
      <div className={styles.title}>
        <div>
          <span style={{ paddingRight: 2 }}>12:58</span>
          <img
            style={{ paddingBottom: 2 }}
            src={imgs.icon11}
            alt=""
            className={styles.titleImg}
          />
        </div>
        <div>
          <img src={imgs.icon10} alt="" className={styles.titleImg} />
          <img src={imgs.icon1} alt="" className={styles.titleImg} />
          <img src={imgs.icon2} alt="" className={styles.titleImg} />
          <img src={imgs.icon5} alt="" className={styles.titleImg} />
        </div>
      </div>

      <div className={styles.title2}>
        <img
          src={imgs.icon9}
          alt=""
          className={styles.titleImg2}
          onClick={() => {
            history.push({ pathname: '/' });
          }}
        />
        <span
          onClick={() => {
            history.push({ pathname: '/home' });
          }}
        >
          详情
        </span>
        <div className={styles.title3}>
          <div className={styles.dot}></div>
          <div className={styles.dot}></div>
          <div className={styles.dot}></div>
        </div>
      </div>

      <div className={styles.content}>
        {/*上半部分*/}
        <div style={{ display: 'flex' }}>
          <div className={styles.contentLeft}>
            <img src={imgs.icon0} alt="" className={styles.contentLeftImg} />
          </div>
          <div className={styles.contentLeft}>
            <span className={styles.name}>Config</span>
            <span className={styles.name2}>
              "首家低碳环保花园式日托园一笑笑·自由心岸日托园"12月预报名钜惠活动！抢学位去啦！
            </span>
            <div className={styles.name3}>
              <img src={imgs.icon0} className={styles.contentLeftImg} alt="" />
              <span className={styles.name4}>
                Open Day | 笑笑·自由心岸最美绽放
              </span>
            </div>
            <div className={styles.name5}>
              <span className={styles.name7}>
                14:00 &nbsp;&nbsp;&nbsp;&nbsp; 删除
              </span>
              <div className={styles.dot0}>
                <div className={styles.dot}></div>
                <div className={styles.dot}></div>
              </div>
            </div>
          </div>
        </div>

        {/*下半部分*/}
        <div className={styles.bottom}>
          <div>
            <img src={imgs.icon7} alt="" className={styles.love} />
          </div>

          <div className={styles.bottom1}>
            {arr.map((i, ix) => {
              return (
                <img
                  key={ix}
                  src={require(`../../heads/head_${i}.png`)}
                  alt=""
                  className={styles.bottomImg}
                />
              );
            })}
          </div>
        </div>

        {/*评论部分*/}
        <div className={styles.say}>
          <div className={styles.say1}>评论</div>
          <img src={imgs.icon8} alt="" className={styles.say2} />
          <div className={styles.say3}>发送</div>
        </div>
      </div>
    </div>
  );
}
